<template>
  <div class="bgColor">
    <div class="biaodan">
      <div>
        <input type="text" placeholder="请输入手机号" v-model="phone" />
      </div>
      <div>
        <input type="password" placeholder="请输入密码" v-model="userpwd" />
      </div>
      <div id="isUser">
        <input type="checkbox" v-model="isuser" />我已阅读并且同意<span
          >隐私政策</span
        >
      </div>

      <div>
        <button class="zhuces" @click="erolls">登录</button>
      </div>
      <div>
        <button @click="changeLogin">没有号,去注册</button>
      </div>
      <div>{{ msg }}</div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      userpwd: "",
      isuser: false,
      msg: "",
      phone: "",
      imgs: [
        require("@/icon/head/1.jpeg"),
        require("@/icon/head/2.png"),
        require("@/icon/head/3.jpg"),
        require("@/icon/head/4.jpg"),
      ],
    };
  },
  methods: {
    changeLogin() {
      this.$router.push("/login");
    },
    erolls() {
      let resphone =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;

      console.log(this.phone, this.userpwd);
      if (resphone.test(this.phone) && this.userpwd.length > 5 && this.isuser) {
        //登录
        this.$axios
          .post(`http://175.178.117.99:8004/users/signIn`, {
            account: this.phone,
            password: this.userpwd,
          })
          .then((result) => {
            console.log(result);
            if (result.data.message == "登录成功") {
              window.localStorage.setItem("useraccountnumber",JSON.stringify({
                 username: result.data.username,
                phone: result.data.phone,
                headerImg:this.imgs[parseInt(result.data.header)-1],
              }))
              console.log(this.imgs,parseInt(result.data.header));
              console.log(JSON.parse(window.localStorage.getItem('useraccountnumber')));
              this.$router.push("/home");
            }
           
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.msg = "格式不正确";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bgColor {
  background-color: @color3;
  height: 100vh;

  .biaodan {
    width: 335rem;
    margin: 0 auto;
    padding-top: 85rem;
    > div {
      margin-top: 15rem;
      color: @color4;
      font-size: 16rem;
      input {
        width: 275rem;
        height: 45rem;
        padding-left: 30rem;
        color: @color4;
        outline: none;
        background-color: @color3;
        border: none;
        border-bottom: 1px solid @color4;
      }
      button {
        width: 305rem;
        height: 45rem;
        border-radius: 15rem;
        border: none;
      }
      .zhuces {
        background-color: @color1;
        color: @color4;
      }
    }

    #isUser {
      text-align: left;
      margin-left: 20rem;
      display: flex;
      align-items: center;
      input {
        width: 20rem;
        height: 20rem;
        color: @color4;
        margin-right: 5rem;
      }
      span {
        color: @color1;
      }
    }
  }
}
</style>